$(function(){
	var timer;
	
	
	
	
//游戏规则模块
	//点击打开
	$(".rules").click(function(){
		// $(".rule").stop().fadeIn(200);
		$(".rule").css("display","block");
	});
	//点击关闭
	$(".rule>a").click(function(){
		// $(".rule").stop().fadeIn(200);
		$(".rule").stop().fadeOut(500);
	});
	
//开始游戏按钮
	$(".star").click(function(){
		//隐藏开始按钮
		$(this).css("display","none");
		//调用进度条方法
		progressHandle();
		//调用灰太狼出现方法
		starwolfAnimation();
	});
	
//结束再来一把按钮
	$(".mask button").click(function(){
		$(".mask").stop().fadeOut(100);
		$(".star").stop().fadeIn(100);
		$("#gride").text(0);
	})
	
	
	
	
// 定义进度条方法
	function progressHandle(){
		//是进度条变成原来的宽度
		$(".progress").css("width","180px")
		//开启定时器使宽度变小
			timer = setInterval(function(){
			//拿到div宽度
			var progressWidth = $(".progress").width();
			//减小div宽度
			progressWidth = progressWidth - 3;
			//判断时间是否结束，进度条是否走完
			if(progressWidth<=0){
				//关闭定时器
				clearInterval(timer);
				$(".mask").fadeIn(100);
				stopwolfAnimation()
			}
			//设定减小后的宽度
			$(".progress").css("width",progressWidth)
		},1000)
	}
})



var wolfTimer;
	//定义数组保存狼的图片
	var wolfHtl = ["img/h0.png","img/h1.png","img/h2.png","img/h3.png","img/h4.png","img/h5.png","img/h6.png","img/h7.png","img/h8.png","img/h9.png"];
	var wolfXhh = ["img/x0.png","img/x1.png","img/x2.png","img/x3.png","img/x4.png","img/x5.png","img/x6.png","img/x7.png","img/x8.png","img/x9.png"];
//调用灰太狼出现方法
function starwolfAnimation(){
	//定义数组保存出现位置
	var arrPos = [
	    {left:"100px",top:"115px"},
	    {left:"20px",top:"160px"},
	    {left:"190px",top:"142px"},
	    {left:"105px",top:"193px"},
	    {left:"19px",top:"221px"},
	    {left:"202px",top:"212px"},
	    {left:"120px",top:"275px"},
	    {left:"30px",top:"295px"},
	    {left:"209px",top:"297px"}
	];
	//创建第一张图片
	var $wolfImg = $("<img class='wolfImg' src=''>");
	
	//随机获取图片位置
	var num = Math.round(Math.random()*8)
	//设置狼位置
	$wolfImg.css({
		position:"absolute",
		left:arrPos[num].left,
		top:arrPos[num].top,
	});
	
	//随机出现数组类型
	var wolfArr ;
	if(Math.round(Math.random())==0){
		wolfArr = wolfHtl
	}else {
		wolfArr = wolfXhh
	}
	//设置图片内容切换实现动画效果
		window.arrNum = 0;
		window.arrNumEnd = 5;
		wolfTimer = setInterval(function(){
		//判断动画是否执行结束
		if(arrNum>window.arrNumEnd){
			$($wolfImg).remove();
			clearInterval(wolfTimer);
			starwolfAnimation();
		}
		$wolfImg.attr("src",wolfArr[arrNum]);
		arrNum ++;
	},120)
	
	//添加图片到界面上
	$(".container").append($wolfImg);
	
	//调用处理分数方法
	ganmeRules($wolfImg,wolfArr)
}


//定义游戏结束时候清空狼动画方法
function stopwolfAnimation(){
	$(".wolfImg").remove();
	clearInterval(wolfTimer);
}


var gride;
//处理游戏分数方法
function ganmeRules($wolfImg,wolfArr){
	$($wolfImg).one("click",function(){
		//改变arrNum值，切换图片实现被打动画
		window.arrNum = 5;
		window.arrNumEnd = 9;
		if(wolfArr == wolfHtl){
		//点到灰太狼时
			//改变分数
			gride = +$("#gride").text();
			gride += 10;
			$("#gride").text(gride) 
		}else{
		//点到小灰灰
			//改变分数
			gride = +$("#gride").text();
			gride -= 10;
			$("#gride").text(gride) 
		}
	})
}

